<template>
	<view class="container">
		<!-- <image class="top_bg"></image> -->
		<!-- 顶部导航栏 -->
		<view class="header" :class="{ 'header-scrolled': isScrolled }" :style="{paddingTop:`${statusBarHeight}px`}">
			<!-- 顶部元素区域  -->
			<view class="header-top">
				<view class="header-left" @click="closePage">
					<!-- <text class="close-btn" @click="closePage"> -->
					<image class="close-img" src="/static/closePage.png" mode=""></image>
					<!-- </text> -->
					<!-- view. -->
				</view>
				<view class="header-center">
					<text class="title">{{langsize['top-up']}}</text>
				</view>
				<view class="header-right">
					<view class="coin-container">
						<image class="coin-icon" src="/static/coin-icon.png" mode="aspectFit"></image>
						<text class="coin-amount">{{ userCoins }}</text>
					</view>
				</view>
			</view>
			<!-- 订阅优惠部分 -->
			<view class="subscription-section" v-if="subscriptionCards.length>0">
				<view class="section-bg"></view>
				<!-- <image src="/static/title_bg.png" mode="" class="title_bg"></image> -->
				<view class="section-title">
					<text class="title-text">{{langsize['OFFERS'] || 'SUBSCRIPTION OFFERS'}}</text>
					<!-- <text class="title-text">SUBSCRIPTION OFFERS</text> -->
				</view>
			</view>
		</view>
		<!-- 订阅优惠轮播 -->
		<view class="subscription-carousel-container" v-if="subscriptionCards.length>0">
			<subscription-carousel :cardList="subscriptionCards" :autoplay="false" @change="onCarouselChange"
				@selected="onCardSelected" />
		</view>

		<!-- 订阅条款和链接 -->
		<view class="subscription-footer">
			<view class="footer-content">
				<text
					class="pricing-info">{{langsize['Weekly'] || 'Weekly pricing. Auto-renew, cancel anytime.'}}</text>
				<view class="footer-links">
					<!-- <text class="footer-link" @click="openTerms">Terms & Conditions</text> -->
					<text class="footer-link" @click="openArticle('XA55915081')">{{langsize['privacy-policy']}}</text>
					<text class="footer-link" @click="openArticle('XA38549026')">{{langsize['user-agreement']}}</text>
				</view>
				<!-- <text class="footer-link" @click="openArticle('XA95479212')">{{langsize[['subscription-terms']] || 'Subscription Terms'}}</text> -->
				<!-- <text class="footer-link" @click="openSubscriptionTerms">Subscription Terms</text>
				<text class="footer-link restore-link" @click="restorePurchase">Restore</text> -->
			</view>
		</view>
		<view class="subscription-section02">
			<view class="section-bg02"></view>
			<view class="section-title">
				<view class="title-text">{{langsize['H5-offers'] || 'SPECIAL OFFERS'}}</view>
			</view>
		</view>
		<view class="subscription-section03">
			<view class="section-title">
				<view class="title-text03">
					{{langsize['H5-only-once'] || 'EACH OF SPECIAL OOFFERS IS AVAILABLE ONLY ONCE'}}</view>
			</view>
		</view>
		<!-- 推荐金币充值包 -->
		<view class="special-offers-container" v-if="recommendPackList.length>0">
			<!-- 第一张卡片 - STARTER -->
			<view class="special-card-wrapper" v-for="(item,index) in recommendPackList" :key="item.product_id">
				<view class="special-card-bg03" @click="buySpecialOffer(item.did,item.product_id)">
					<image :src="item.bgIndex" class="rec_bg" alt=""></image>
					<view class="card-content-overlay">
						<!-- 右上角硬币信息 -->
						<view class="coins-info-overlay">
							<text class="coins-text-overlay">{{ item.tips2 }}</text>
							<image class="coin-icon-overlay" src="/static/coin-icon.png" mode="aspectFit"></image>
						</view>
						<!-- 右下角价格信息 -->
						<view class="price-info-overlay">
							<view class="current-price-overlay">
								<text class="price-text-overlay">{{ item.tips1 }}</text>
							</view>
							<view class="discount-badge-overlay" v-if="item.discount">
								<text class="discount-text-overlay">{{ specialOffers[0]?.discount || '-30%' }}</text>
							</view>
							<view class="original-discount-overlay" v-if="item.original_price!=0.00&&item.original_price!=0">
								<text class="original-price-overlay">{{item.original_price}}</text>
							</view>
						</view>
						<text class="discount_rate" v-if="item.discount_rate!='-0%'">{{item.discount_rate}}</text>
					</view>
				</view>
				<!-- 外部标签 -->
				<view class="external-label-overlay">
					<text class="external-label-text-overlay">{{ specialOffers[0]?.label || 'STARTER' }}</text>
				</view>
			</view>

		</view>
		<view class="subscription-section02">
			<view class="section-bg02"></view>
			<view class="section-title">
				<view class="title-text">{{langsize['H5-coins'] || 'REFILL COINS'}}</view>
			</view>
		</view>
		<!-- 硬币充值网格 -->
		<view class="refill-coins-container">
			<view :class="['refill-grid', getGridLayoutClass()]">
				<template v-for="(item, index) in payData" :key="item.did">
					<!-- 普通充值卡片 -->
					<view v-if="!isGiftBoxPosition(index)" :class="['refill-card', getCardClass(item, index)]"
						@click="buyCoins(item.did,item.product_id)">
						<view v-if="item.bonus_ratio && item.bonus_ratio !== '0%'" class="discount-badge-refill">
							{{ item.bonus_ratio }}
						</view>
						<view v-if="item.ishot === 1" class="most-popular-label">MOST POPULAR</view>
						<view class="coin-bg-overlay">
							<image class="coin-bg-image" src="/static/bgjinbi.svg" mode="aspectFit"></image>
						</view>
						<view class="coin-display">
							<image class="coin-icon-refill" :src="getCoinIcon(index)" mode=""></image>
							<text class="coin-amount-refill">
								{{ item.total_value }}
							</text>
							<text v-if="item.givevalue > 0"
								:class="item.ishot === 1 ? 'original-amount-red' : 'original-amount-refill'">
								{{ item.value }}
							</text>
						</view>
						<view :class="item.ishot === 1 ? 'price-refillred' : 'price-refill'">
							{{ item.tips1 }}
						</view>
					</view>
				</template>
			</view>
		</view>
		<!-- 独立的礼盒卡片 -->
		<view class="gift-box-section" v-if="shouldShowGiftBox()">
			<view class="gift-box-card" @click="buyCoins(payData[payData.length-1].did,payData[payData.length-1].product_id, )">
				<view class="gift-discount-badge">+100%</view>
				<view class="gift-card-content">
					<view class="gift-box-image">
						<image class="gift-box-icon" src="/static/bgxz.png" mode="aspectFit"></image>
					</view>
					<view class="gift-coin-info">
						<view class="gift-coin-bg">
							<view class="gift-coin-amount-container">
								<view class="gift-coin-amount">{{ getGiftBoxCoins(payData.length-1) }}</view>
								<view class="gift-coin-subtitle">{{ getGiftBoxOriginalCoins(payData.length-1) }}</view>
								<view class="gift-best-value-label">BEST VALUE</view>
							</view>
						</view>
					</view>
				</view>
				<view class="gift-price-section">${{ getGiftBoxPrice(payData.length-1) }}</view>
			</view>
		</view>
		<view class="subscription-section02" v-if="subscribeAddonList.length>0">
			<view class="section-bg03"></view>
			<view class="section-title">
				<view class="title-text">{{langsize['H5-premium'] || 'PREMIUM OFFERS'}}</view>
			</view>
		</view>
		<view class="subscription-section03" v-if="subscribeAddonList.length>0">
			<view class="section-title">
				<view class="title-text03">{{langsize['H5-subscribers'] || 'ONLY FOR SUBSCRIBERS'}}</view>
			</view>
		</view>

		<!-- 锁定区域 -->
		<view class="locked-section" @click="showSubscriptionPopup"
			v-if="subscribeAddonList.length>0&&!isGoldSubscription">
			<view class="locked-bg">
				<image class="locked-bg-image" src="/static/bgcolor04.png" mode="aspectFit"></image>
				<view class="lock-container">
					<image class="lock-icon" src="/static/bgsuo.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<!-- 加油金币充值包-->
		<view class="subscribers-only-section" v-if="subscribeAddonList.length>0">
			<view class="premium-cards-container">
				<image src="/static/p_bg.png" mode="" class="p-bg"></image>
				<view class="premium-card" v-for="(item, index) in subscribeAddonList" :key="item.product_id || index"
					@click="buySubscribeAddon(item.did,item.product_id)">
					<!-- {{ item.bonus_ratio || '+0%' }} -->
					<image src="/static/p_coin_bg.png" class="p_coin_bg"></image>
					<view class="premium-discount-badge">{{ item.bonus_ratio || '+0%' }}</view>
					<view class="coin-bg-overlay">
						<image class="lock-bg-image" src="/static/bgjinbi.svg" mode="aspectFit"></image>
					</view>
					<view class="premium-coin-display">
						<image v-if="index<3" :class="'premium-coin-icon premium-coin-icon-0' + (index + 1)"
							:src="'/static/goldcoin0' + (index + 1) + '.png'" mode="aspectFit"></image>
						<image v-if="index>=3" :class="'premium-coin-icon premium-coin-icon-0' + (index + 1)"
							:src="'/static/goldcoin0' + (3) + '.png'" mode="aspectFit"></image>
						<text class="premium-coin-amount">{{ item.total_value}}</text>
						<text class="premium-original-amount" v-if="item.original_coin">{{ original_coin}}</text>
						<text class="origin_coin">{{item.value}}</text>
					</view>
					<view class="premium-price-section">{{ item.tips1}}</view>
				</view>
				<!-- <view class="premium-card" v-for="(item, index) in subscribeAddonList" :key="item.product_id || index"
					@click="buySubscribeAddon(item.did,item.product_id)">
					<view class="premium-discount-badge">{{ item.bonus_ratio || '+0%' }}</view>
					<view class="coin-bg-overlay">
						<image class="lock-bg-image" src="/static/bgjinbi.svg" mode="aspectFit"></image>
					</view>
					<view class="premium-coin-display">
						<image :class="'premium-coin-icon premium-coin-icon-0' + (index + 1)"
							:src="'/static/goldcoin0' + (index + 1) + '.png'" mode="aspectFit"></image>
						<text class="premium-coin-amount">{{ item.
total_value}}</text>
						<text class="premium-original-amount" v-if="item.original_coin">{{ original_coin}}</text>
					</view>
					<view class="premium-price-section">{{ item.tips1}}</view>
				</view> -->
			</view>
		</view>
		<!-- <image src="/static/S.png" style="width: 184rpx;height: 120rpx;" mode=""></image> -->
		<!-- 订阅弹出层 -->
		<SubscriptionPopup :visible="subscriptionPopupVisible" :subscriptionData="subscriptionCards"
			:langsize="langsize" :coinAmount="userCoins" @close="hideSubscriptionPopup" @openArticle="openArticle"
			@subscription-selected="handleSubscriptionSelected" />

		<!-- 测试回调按钮 -->
		<!-- <view class="test-callback-section">
			<view class="test-callback-section">
				<view class="test-callback-button" @click="goToPaymentResult">
					<text class="test-callback-text">跳转到支付结果页面</text>
				</view>
			</view>
		</view> -->

		<!-- 协议内容弹窗 -->
		<view v-if="protocolPopupVisible" class="protocol-popup-overlay" @click="closeProtocolPopup">
			<view class="protocol-popup-container" @click.stop>
				<view class="protocol-popup-header">
					<text class="protocol-popup-title">{{ protocolData.cha_title || langsize['H5-agreement'] }}</text>
					<view class="protocol-close-btn" @click="closeProtocolPopup">
						<text class="protocol-close-text">×</text>
					</view>
				</view>
				<scroll-view class="protocol-popup-content" scroll-y="true">
					<rich-text class="protocol-rich-text" :nodes="protocolData.txt_content || ''"></rich-text>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import SubscriptionCarousel from '@/components/subscription-carousel/subscription-carousel.vue'
	import SubscriptionPopup from '@/components/subscription-popup/subscription-popup.vue'
	import r from '@/helper/config.js'
	import md5 from '@/helper/md5.js'
	import CryptoJS from 'crypto-js';
	var info = uni.getSystemInfo()
	if (!info?.statusBarHeight) {
		info = uni.getWindowInfo()
	}
	if (!info?.statusBarHeight) {
		info.statusBarHeight = 44
	}
	// console.log(info)
	export default {
		components: {
			SubscriptionCarousel,
			SubscriptionPopup
		},
		data() {
			return {
				statusBarHeight: info.statusBarHeight,
				title: 'Top Up',
				isScrolled: false,
				// 页面参数
				token: '',
				lang: {},
				pid: '',
				backJumpPage: '',
				version: '',
				vid: '',
				eid: '',
				sign: '',
				uid: '', // 用户ID
				// 语言相关
				ios: 0,
				langsize: {},
				subscriptionRechargeId: 0, //订阅加油包
				// 订阅加油包数据
				subscriptionCards: [],
				// 特殊优惠数据
				specialOffers: [],
				premiumCards: [],
				premiumSubscriptionData: [], // 存储API返回的订阅数据用于premium cards显示
				payData: [],
				payDataRechargeId: '', // 普通金币充值的recharge_id
				subscriptionPopupVisible: false,
				userCoins: '0', // 用户当前金币数量
				// 测试回调数据
				testPaymentInfo: {
					pay_url: 'https://test-payment.example.com/pay?order=123456',
					jump_type: 1,
					order_id: 'TEST_ORDER_' + Date.now()
				},
				// 协议弹窗相关数据
				protocolPopupVisible: false,
				protocolData: {
					cha_article_sn: '',
					cha_title: '',
					txt_content: ''
				},
				isGoldSubscription: false,
				subscribeAddonList: [], //加油金币充值列表
				subscribeAddonRechargeId: 0,
				recommendPackList: [], //推荐金币充值包
				recommendRechargeId: 0,
			}
		},
		async onLoad(option) {
			// console.log(option)
			// H5环境下从URL查询参数获取数据
			// #ifdef H5
			const urlParams = this.getUrlParams();
			// console.log('H5 URL查询参数:', urlParams);
			this.token = urlParams.k || uni.getStorageSync('token') || '';
			this.lang = urlParams.lang || uni.getStorageSync('lang') || 'en-us';
			this.pid = urlParams.pid || '';
			this.backJumpPage = urlParams.backJumpPage || '';
			this.version = urlParams.version || '';
			// this.sign = urlParams.sign || '';
			this.uid = urlParams.uid || '';
			this.ios = urlParams.ios
			if (urlParams.vid) {
				this.vid = urlParams.vid;
				this.eid = urlParams.eid;
			}
			// #endif

			// 非H5环境下从option获取数据
			// #ifndef H5
			this.token = option.k || uni.getStorageSync('token') || '';
			this.lang = option.lang || uni.getStorageSync('lang') || 'en-us';
			this.pid = option.pid || '';
			this.backJumpPage = option.backJumpPage || '';
			this.version = option.version || '';
			// this.sign = option.sign || '';
			this.uid = option.uid || '';
			this.ios = option?.ios
			if (option?.vid) {
				this.vid = option?.vid;
				this.eid = option?.eid;
			}
			// #endif

			// 保存获取到的参数到本地存储
			if (this.token) {
				uni.setStorageSync('token', this.token);
			}
			if (this.lang) {
				uni.setStorageSync('lang', this.lang);
			}
			if (this.uid) {
				uni.setStorageSync('uid', this.uid);
			}

			// console.log('获取到的参数:', {
			// 	token: this.token,
			// 	lang: this.lang,
			// 	pid: this.pid,
			// 	version: this.version,
			// 	vid: this.vid,
			// 	eid: this.eid,
			// 	sign: this.sign,
			// 	uid: this.uid
			// });

			// 页面加载时添加滚动监听
			this.addScrollListener();
			await this.loadUserInfo();
			this.loadPayData();
			this.loadSubscribeData();
			// this.loadSpecialOffersData();
			this.loadLanguage();
			this.getSubscribeAddonFun()
		},
		onUnload() {
			this.removeScrollListener();
		},
		methods: {
			// 获取加油金币充值包
			getSubscribeAddonFun() {
				this.$api.getSubscribeAddon(this.getCommonParams()).then(res => {
					// console.log("subscribeAddonList", res)
					if (res.code == 0) {
						this.subscribeAddonList = res.data.payData
						this.isGoldSubscription = res.data.isGoldSubscription
						this.subscribeAddonRechargeId = res.data.recharge_id
						// console.log("subscribeAddonList", this.subscribeAddonList)
					}
				}).catch(e => {
					console.log(e)
				})
			},
			// 购买加油金币充值包
			async buySubscribeAddon(did, productId) {
				if (!this.isGoldSubscription) {
					this.showSubscriptionPopup()
					return
				}
				try {
					// console.log('购买订阅:', rechargeId, productId, did);
					let rechargeId = this.subscribeAddonRechargeId
					// 检测设备类型
					// if (this.isIOSDevice()) {
					// iOS设备使用苹果支付
					const orderData = await this.createOrder(rechargeId, did, productId, 1); //2表示类型是订阅
					// console.log("订阅", orderData)
					// await this.handleIOSPayment(orderData, price, productId, did);
					if (orderData?.pay_url) {
						uni.webView.postMessage({
							data: {
								action: 'toPay',
								pay_url: orderData.pay_url,
								jump_type: orderData?.jumpType || 2,
								order_id: orderData.orderId,
								back_jump_page: this.backJumpPage || ''
							}
						});
					}
					// } else {
					// 	// 其他设备使用H5支付
					// 	await this.handleH5Payment('subscribe', productId, price, null, did);
					// }
				} catch (error) {
					console.error('购买订阅失败:', error);
				}
			},
			// 获取URL查询参数（H5环境专用）
			getUrlParams() {
				const params = {};
				// #ifdef H5
				const urlSearchParams = new URLSearchParams(window.location.search);
				for (const [key, value] of urlSearchParams) {
					params[key] = decodeURIComponent(value);
				}
				// #endif
				return params;
			},

			// 获取语言列表
			async getLanguageList() {
				try {
					const res = await this.$api.getLanguageList(this.getCommonParams());
					// console.log('语言列表:', res);
					return res;
				} catch (error) {
					console.error('获取语言列表失败:', error);
					return null;
				}
			},

			// 获取公共参数
			getCommonParams() {
				return {
					pid: this.pid || 9,
					version: this.version || 20241129,
					ios: this.ios || 2,
					token: this.token,
					uid: this.uid || uni.getStorageSync('uid') || '',
					timestamp: this.timestamp || Math.floor(Date.now() / 1000),
					lang: this.lang,
					ua: "Mozilla/5.0 (iPhone; CPU iPhone OS 16_7_11 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Html5Plus/1.0 (Immersed/20) uni-app",
					gmt: "GMT+08:00",
					ou: 1
				};
			},

			// 获取支付数据专用参数
			getPayDataParams() {
				return {
					pid: this.pid || 9,
					version: this.version || 20241129,
					ios: this.ios || 2,
					token: this.token,
					uid: this.uid || uni.getStorageSync('uid') || '',
					timestamp: this.timestamp || Math.floor(Date.now() / 1000),
					lang: this.lang,
					ua: "Mozilla/5.0 (iPhone; CPU iPhone OS 16_7_11 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Html5Plus/1.0 (Immersed/20) uni-app",
					gmt: "GMT+08:00",
					ou: 1
				};
			},

			// 生成签名
			generateSign() {
				const timestamp = parseInt(new Date().getTime() / 1000);
				let osName = uni.getSystemInfoSync().osName;
				const ios = osName == 'ios' ? 1 : 0;
				return ios == 1 ? CryptoJS.SHA256(r.key + timestamp).toString() : md5(r.key + timestamp);
			},

			onCarouselChange(index, card) {
				// console.log('轮播切换到:', index, card.title);
			},
			// 订阅
			onCardSelected(did, productId) {
				this.buySubscription(this.subscriptionRechargeId, productId, did);
			},
			// 返回app
			closePage() {
				uni.webView.postMessage({
					data: {
						action: 'backPage',
						back_jump_page: this.backJumpPage || ''
					}
				});

				// setTimeout(() => {
				// 	try {
				// 		if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers
				// 			.backPage) {
				// 			window.webkit.messageHandlers.backPage.postMessage({
				// 				action: 'backPage',
				// 				back_jump_page: this.backJumpPage || ''
				// 			});
				// 		} else if (window.Android && window.Android.backPage) {
				// 			window.Android.backPage(JSON.stringify({
				// 				action: 'backPage',
				// 				back_jump_page: this.backJumpPage || ''
				// 			}));
				// 		}
				// 	} catch (e) {
				// 		console.error('备用返回方案失败:', e);
				// 	}
				// }, 100);
			},
			addScrollListener() {
				// #ifdef H5
				window.addEventListener('scroll', this.handleScroll);
				// #endif
			},
			removeScrollListener() {
				// #ifdef H5
				window.removeEventListener('scroll', this.handleScroll);
				// #endif
			},
			handleScroll() {
				const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
				this.isScrolled = scrollTop > 50; // 滚动超过50px时改变状态
			},
			// 购买订阅
			async buySubscription(rechargeId, productId, did) {
				try {
					// console.log('购买订阅:', rechargeId, productId, did);
					// 检测设备类型
					// if (this.isIOSDevice()) {
					// iOS设备使用苹果支付
					const orderData = await this.createOrder(rechargeId, did, productId, 2); //2表示类型是订阅
					// console.log("订阅", JSON.stringify(orderData))
					if (orderData?.pay_url) {
						uni.webView.postMessage({
							data: {
								action: 'toPay',
								pay_url: orderData.pay_url,
								jump_type: orderData?.jumpType || 2,
								order_id: orderData.orderId,
								back_jump_page: this.backJumpPage || ''
							}
						});
					}
					// await this.handleIOSPayment(orderData, price, productId, did);
					// } else {
					// 	// 其他设备使用H5支付
					// 	await this.handleH5Payment('subscribe', productId, price, null, did);
					// }
				} catch (error) {
					console.error('购买订阅失败:', error);
				}
			},

			// 购买推荐金币充值包
			async buySpecialOffer(did, productId) {
				try {
					let rechargeType = 1 //1充币2订阅
					// 检测设备类型
					// if (this.isIOSDevice()) {
					// iOS设备使用苹果支付
					const orderData = await this.createOrder(this.recommendRechargeId, did, productId, rechargeType)
					// console.log("orderData")
					// await this.handleIOSPayment(orderData, price, productId, did);
					if (orderData?.pay_url) {
						uni.webView.postMessage({
							data: {
								action: 'toPay',
								pay_url: orderData.pay_url,
								jump_type: orderData?.jumpType || 2,
								order_id: orderData.orderId,
								back_jump_page: this.backJumpPage || ''
							}
						});
					}
					// } else {
					// 	// 其他设备使用H5支付
					// 	await this.handleH5Payment('special', productId, price, coins, did);
					// }
				} catch (error) {
					console.error('购买特殊优惠失败:', error);

				}
			},

			// 购买普通金币包
			async buyCoins(did, productId) {
				try {

					// // 检测设备类型
					// if (this.isIOSDevice()) {
					// 	// iOS设备使用苹果支付
					const orderData = await this.createOrder(this.payDataRechargeId, did, productId, 1);
					// await this.handleIOSPayment(orderData, price, productId, did);
					// console.log("普通金币", orderData)
					if (orderData?.pay_url) {
						uni.webView.postMessage({
							data: {
								action: 'toPay',
								pay_url: orderData.pay_url,
								jump_type: orderData?.jumpType || 2,
								order_id: orderData.orderId,
								back_jump_page: this.backJumpPage || ''
							}
						});
					}
					// } else {
					// 	// 其他设备使用H5支付
					// 	await this.handleH5Payment('coin', productId, price, coins, did);
					// }
				} catch (error) {
					console.error('购买硬币失败:', error);
				}
			},

			// H5支付处理
			async handleH5Payment(type, planId, price, coins, did) {
				try {
					// console.log('开始H5支付:', {
					// 	type,
					// 	planId,
					// 	price,
					// 	coins,
					// 	did,
					// 	rechargeId: this.rechargeId
					// });

					// 生成动态签名
					const timestamp = parseInt(new Date().getTime() / 1000);
					let osName = uni.getSystemInfoSync().osName;
					const ios = osName == 'ios' ? 1 : 0;
					const sign = ios == 1 ? CryptoJS.SHA256(r.key + timestamp).toString() : md5(r.key + timestamp);

					// 使用动态支付参数
					const paymentData = {
						actualAmount: "", //空参数保留
						paymentProductId: planId, // 购买产品id (从getSubscribe接口的product_id)
						rechargePackId: type === 'coin' ? this.payDataRechargeId : this
							.rechargeId, // 硬币充值用payDataRechargeId，订阅用rechargeId
						did: did, //产品里的Did (从getSubscribe接口payData中的did)
						backJumpPage: this.backJumpPage || "/pages/content/content",
						rechargeType: type === 'coin' ? 1 : 2, //1 是金币 2是订阅
						rechargeType: type === 'coin' ? 1 : 2, //1 是金币 2是订阅
						pid: this.pid || 2, //产品id
						// cid: 215,
						version: this.version || "20250630", //版本号
						timestamp: timestamp, //动态生成的时间戳
						sign: sign, //动态生成的签名
						token: this.token,
						uid: this.uid, // 用户id
						ios: ios, //动态检测的ios标识
						lang: this.lang, // 语言
					};

					// 调用H5支付接口
					const res = await this.$api.h5Pay(paymentData);

					if (res.code === 0 && res.data) {
						const {
							pay_url,
							jump_type,
							order_id
						} = res.data;
						// console.log('H5支付响应:', res.data);

						// 处理支付跳转
						this.handlePaymentRedirect(pay_url, jump_type, order_id);
					} else {
						throw new Error(res.msg || '支付初始化失败');
					}
				} catch (error) {
					console.error('H5支付失败:', error);
					uni.showToast({
						title: error.message || '支付失败，请重试',
						icon: 'none'
					});
				}
			},

			// 处理支付跳转
			handlePaymentRedirect(payUrl, jumpType, orderId) {
				try {
					uni.webView.postMessage({
						data: {
							action: 'toPay',
							pay_url: payUrl,
							jump_type: jumpType || 1,
							order_id: orderId,
							back_jump_page: this.backJumpPage || ''
						}
					});

					// setTimeout(() => {
					// 	try {
					// 		if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.toPay) {
					// 			window.webkit.messageHandlers.toPay.postMessage({
					// 				action: 'toPay',
					// 				pay_url: payUrl,
					// 				jump_type: jumpType || 1,
					// 				order_id: orderId,
					// 				back_jump_page: this.backJumpPage || ''
					// 			});
					// 		} else if (window.Android && window.Android.toPay) {
					// 			window.Android.toPay(JSON.stringify({
					// 				action: 'toPay',
					// 				pay_url: payUrl,
					// 				jump_type: jumpType || 1,
					// 				order_id: orderId,
					// 				back_jump_page: this.backJumpPage || ''
					// 			}));
					// 		}
					// 	} catch (e) {
					// 		console.error('备用支付方案失败:', e);
					// 	}
					// }, 100);
				} catch (error) {
					console.error('支付失败:', error);
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});
				}
			},
			// 创建订单
			async createOrder(rechargeId, did, productId, rechargeType) {
				try {
					// console.log('创建订单:', {
					// 	rechargeId,
					// 	did,
					// 	rechargeType,
					// });
					let common = this.getCommonParams()
					const orderData = {
						rechargePackId: rechargeId,
						product_id: productId,
						did: did,
						recharge_type: rechargeType,
						backJumpPage: this.backJumpPage,
						...common
					};

					// 这里可以调用创建订单的API
					const res = await this.$api.h5Pay(orderData);
					return res.data;

					// 暂时返回模拟数据
					// return orderData;
					// return orderData;
				} catch (error) {
					console.error('创建订单失败:', error);
					throw error;
				}
			},

			// 加载普通金币包和推荐金币包数据
			async loadPayData() {
				try {
					const res = await this.$api.getPayData(this.getPayDataParams());
					if (res.code === 0 && res.data && res.data.payData) {
						this.payData = res.data.payData;
						this.recommendPackList = res.data.recommend_pack.map((item, index) => {
							return {
								...item,
								bgIndex: `/static/image0${(index+1)}.png`
							}
						})
						this.payDataRechargeId = res.data.recharge_id || '';
						this.recommendRechargeId = res.data.recharge_id
						// console.log(this.recommendPackList)
					}
				} catch (error) {
					console.error('加载金币数据失败:', error);
				}
			},

			// 加载订阅数据
			async loadSubscribeData() {
				try {
					const res = await this.$api.getSubscribe(this.getCommonParams());
					// console.log(res)
					if (res.code === 0 && res.data && res.data.payData) {
						this.subscriptionRechargeId = res.data.recharge_id
						const apiData = res.data.payData;

						// 保存recharge_id参数（在data层级下，不在payData里）
						this.rechargeId = res.data.recharge_id || '';

						this.premiumSubscriptionData = apiData;
						this.subscriptionCards = apiData.map((item, index) => {
							return {
								background: `/static/img${index%2}.png`,
								totalCoins: item.content.total_coin_number,
								instantCoins: item.content.now_giving_coin,
								dailyCoins: item.content.gift_coin_number,
								title: this.getSubscriptionTitle(item.tips2, item.time_type),
								price: item.value,
								priceText: `${item.tips1}/${this.getTimeUnit(item.time_type)}`,
								productId: item.product_id,
								did: item.did, // 保存did参数	
								instantLabel: 'INSTANTLY',
								dailyLabel: 'EVERY DAY',
							};
						});
						// this.subscriptionCards = this.subscriptionCards.map((card, index) => {
						// 	if (apiData[index]) {
						// 		const item = apiData[index];
						// 		console.log(`映射卡片 ${index}:`, item);
						// 		console.log(`item.did 值:`, item.did);
						// 		return {
						// 			...card, // 保持原有属性
						// 			title: this.getSubscriptionTitle(item.tips2, item.time_type),
						// 			price: item.value,
						// 			priceText: `${item.tips1}/${this.getTimeUnit(item.time_type)}`,
						// 			productId: item.product_id,
						// 			did: item.did, // 保存did参数
						// 			// 订阅服务不提供硬币，保持默认值
						// 			totalCoins: item.content.total_coin_number,
						// 			instantCoins: item.content.now_giving_coin,
						// 			dailyCoins: item.content.gift_coin_number
						// 		};
						// 	}
						// 	return card;
						// });

						// console.log('订阅数据加载完成:', res.data);
						// console.log('premiumSubscriptionData:', this.premiumSubscriptionData);
						// console.log('subscriptionCards with did:', this.subscriptionCards);
					}
				} catch (error) {
					console.error('加载订阅数据失败:', error);
				}
			},

			// 获取订阅标题
			getSubscriptionTitle(tips2, timeType) {
				if (tips2) return tips2;
				return timeType === 1 ? 'Weekly Subscription' :
					timeType === 2 ? 'Monthly Subscription' :
					timeType === 3 ? 'Yearly Subscription' : 'Subscription';
			},

			// 获取时间单位
			getTimeUnit(timeType) {
				switch (timeType) {
					case 3:
						return 'week';
					case 2:
						return 'month';
					case 1:
						return 'year';
					default:
						return 'period';
				}
			},

			// 加载特殊优惠数据
			// async loadSpecialOffersData() {
			// 	try {
			// 		console.log('开始加载特殊优惠数据...');
			// 		// 调用getSubscribe接口获取特殊优惠数据
			// 		const res = await this.$api.getSubscribe(this.getCommonParams());

			// 		if (res.code === 0 && res.data && res.data.payData) {
			// 			const apiData = res.data.payData;
			// 			console.log('特殊优惠API响应:', res.data);

			// 			// 更新specialOffers数组，使用后端返回的真实数据
			// 			this.specialOffers = this.specialOffers.map((offer, index) => {
			// 				if (apiData[index]) {
			// 					const item = apiData[index];
			// 					return {
			// 						...offer, // 保持原有的UI配置
			// 						// 使用后端返回的真实数据
			// 						original_price: item.value || offer.original_price,
			// 						value: item.total_coin_number || item.coin_number || offer.value,
			// 						tips1: item.tips1 || offer.tips1,
			// 						discount: item.bonus_ratio || offer.discount,
			// 						label: this.getSpecialOfferLabel(index, item),
			// 						product_id: item.product_id || '',
			// 						did: item.did || `special_${index}_${Date.now()}`,
			// 						// 保留后端的其他字段
			// 						coin_number: item.coin_number,
			// 						total_coin_number: item.total_coin_number,
			// 						bonus_ratio: item.bonus_ratio,
			// 						time_type: item.time_type
			// 					};
			// 				}
			// 				return {
			// 					...offer,
			// 					did: `special_default_${index}_${Date.now()}`
			// 				};
			// 			});

			// 			console.log('特殊优惠数据更新完成:', this.specialOffers);
			// 		} else {
			// 			console.warn('特殊优惠数据获取失败，使用默认数据');
			// 			// 如果API调用失败，为默认数据分配did值
			// 			this.specialOffers = this.specialOffers.map((offer, index) => ({
			// 				...offer,
			// 				did: `special_fallback_${index}_${Date.now()}`
			// 			}));
			// 		}
			// 	} catch (error) {
			// 		console.error('加载特殊优惠数据失败:', error);
			// 		// 错误处理：使用默认数据并分配did值
			// 		this.specialOffers = this.specialOffers.map((offer, index) => ({
			// 			...offer,
			// 			did: `special_error_${index}_${Date.now()}`
			// 		}));
			// 	}
			// },

			// 获取特殊优惠标签
			getSpecialOfferLabel(index, item) {
				// 根据索引和数据特征决定标签
				if (index === 0) return 'STARTER';
				if (index === 1) return 'BEST VALUE';
				if (index === 2) return 'POPULAR';

				// 备用逻辑：根据价格或其他特征
				const price = parseFloat(item.value);
				if (price >= 50) return 'BEST VALUE';
				if (price >= 20) return 'POPULAR';
				return 'STARTER';
			},

			// 加载用户信息
			async loadUserInfo() {
				try {
					const res = await this.$api.getUserInfo(this.getCommonParams());
					if (res.code === 0 && res.data && res.data.user_info) {
						this.userCoins = res.data.user_info.ficoin || '0';
						this.uid = res.data.user_info.uid
						// console.log('用户信息:', res.data);
					}
				} catch (error) {
					console.error('加载用户信息失败:', JSON.stringify(error));
				}
			},

			// 打开文章
			async openArticle(article_sn) {
				try {
					// console.log('获取隐私协议详情...');

					// 构建请求参数
					const params = {
						...this.getCommonParams(),
						article_sn: article_sn,
					};

					const res = await this.$api.articleProtocolDetails(params);

					if (res.code === 0 && res.data) {
						// console.log('隐私协议详情:', res.data);

						// 更新协议数据并显示弹窗
						this.protocolData = {
							cha_article_sn: res.data.cha_article_sn || '',
							cha_title: res.data.cha_title || '',
							txt_content: res.data.txt_content || ''
						};

						// 显示协议弹窗
						this.protocolPopupVisible = true;
					} else {
						throw new Error(res.msg || '获取隐私协议失败');
					}
				} catch (error) {
					console.error('获取隐私协议失败:', error);
					uni.showToast({
						title: '获取协议失败',
						icon: 'none'
					});
				}
			},

			// 打开条款与条件
			async openTerms() {
				try {
					// console.log('获取用户协议详情...');

					// 构建请求参数
					const params = {
						...this.getCommonParams(),
						article_sn: 'XA98123741',
						type: 'terms' // 用户协议类型
					};

					const res = await this.$api.articleProtocolDetails(params);

					if (res.code === 0 && res.data) {
						// console.log('用户协议详情:', res.data);

						// 更新协议数据并显示弹窗
						this.protocolData = {
							cha_article_sn: res.data.cha_article_sn || '',
							cha_title: res.data.cha_title || '',
							txt_content: res.data.txt_content || ''
						};

						// 显示协议弹窗
						this.protocolPopupVisible = true;
					} else {
						throw new Error(res.msg || '获取用户协议失败');
					}
				} catch (error) {
					console.error('获取用户协议失败:', error);
					uni.showToast({
						title: '获取协议失败',
						icon: 'none'
					});
				}
			},

			// 打开订阅条款
			openSubscriptionTerms() {
				// 复用openTerms方法，或者可以传入不同的article_sn
				this.openTerms();
			},

			// 关闭协议弹窗
			closeProtocolPopup() {
				this.protocolPopupVisible = false;
				this.protocolData = {
					cha_article_sn: '',
					cha_title: '',
					txt_content: ''
				};
			},

			// 恢复购买
			restorePurchase() {
				// console.log('恢复购买');
			},

			// 显示订阅弹出层
			showSubscriptionPopup() {
				this.subscriptionPopupVisible = true;
			},

			// 隐藏订阅弹出层
			hideSubscriptionPopup() {
				this.subscriptionPopupVisible = false;
			},

			// 处理订阅选择事件
			handleSubscriptionSelected(did, productId) {
				// console.log('选择了订阅:', data.card.title, '索引:', data.index);
				this.buySubscription(this.subscriptionRechargeId, productId, did);
				this.hideSubscriptionPopup();
			},

			// 获取充值卡片图标
			getCoinIcon(index) {
				const icons = [
					'/static/Slice1.png',
					'/static/Slice2.png',
					'/static/Slice3.png',
					'/static/Slice4.png',
					'/static/Slice5.png',
					'/static/Slice6.png'
				];
				return icons[index] || '/static/Slice6.png';
			},

			// 获取充值卡片样式类
			getCardClass(item, index) {
				if (item.ishot === 1) {
					return 'refill-card-popular';
				}
				return index === 0 ? 'refill-card-small' : 'refill-card-medium';
			},

			// 判断是否为礼盒位置
			isGiftBoxPosition(index) {
				return index === this.payData.length - 1 && this.shouldShowGiftBox();
			},

			// 判断是否应该显示礼盒
			shouldShowGiftBox() {
				const length = this.payData.length;
				// 公式：(length - 4) % 3 === 0 且 length >= 4
				return length >= 4 && length % 3 != 0;
			},

			// 获取网格布局CSS类
			getGridLayoutClass() {
				const visibleItemCount = this.payData.filter((item, index) => !this.isGiftBoxPosition(index)).length;

				if (visibleItemCount === 1) {
					return 'grid-single-item';
				} else if (visibleItemCount === 2) {
					return 'grid-two-items';
				}
				return '';
			},

			// 获取礼盒价格
			getGiftBoxPrice(index) {
				const item = this.payData[index];
				return item ? this.getPrice(item.tips1) : '299.99';
			},

			// 获取礼盒硬币数量
			getGiftBoxCoins(index) {
				const item = this.payData[index];
				return item ? item.total_value : '50000';
			},

			// 获取礼盒原始硬币数量
			getGiftBoxOriginalCoins(index) {
				const item = this.payData[index];
				return item ? item.value : '25000';
			},

			// 获取价格（去掉$符号）
			getPrice(tips1) {
				return tips1.replace('$', '');
			},

			// 检测是否为iOS设备
			isIOSDevice() {
				// #ifdef H5
				const userAgent = navigator.userAgent || navigator.vendor || window.opera;
				return /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;
				// #endif
				// #ifdef APP-PLUS
				return uni.getSystemInfoSync().platform === 'ios';
				// #endif
				return false;
			},

			// 处理iOS苹果支付
			async handleIOSPayment(orderData, price, productId, did) {
				try {
					// console.log('iOS设备支付:', {
					// 	orderData,
					// 	price,
					// 	productId,
					// 	did
					// });

					// iOS设备也直接使用H5支付流程
					const type = orderData.type || 'coin';
					const planId = orderData.planId || productId;
					const coins = orderData.coins;
					const orderDid = orderData.did || did;

					await this.handleH5Payment(type, planId, price, coins, orderDid);
				} catch (error) {
					console.error('iOS支付失败:', error);
					uni.showToast({
						title: '支付失败，请重试',
						icon: 'none'
					});
				}
			},
			openSchemaLink() {
				try {
					const schemaUrl =
						'xtvshort://pages/content/content?vid=52027386966&data=e2ea8bd25232240e4e0519f8625c77d5';
					window.location.href = schemaUrl;
				} catch (error) {
					// console.log(error);
				}
			},

			goToPaymentResult() {
				// console.log(1);
				uni.navigateTo({
					url: '/pages/payment-result/payment-result'
				})
			},

			// 获取当前时间
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			async testCallback() {
				try {
					const paymentData = await this.getTestPaymentData();
					if (paymentData) {
						uni.postMessage({
							data: {
								action: 'toPay',
								pay_url: paymentData.pay_url,
								jump_type: paymentData.jump_type,
								order_id: paymentData.order_id,
								back_jump_page: this.backJumpPage
							}
						});
						// console.log('测试回调已发送', paymentData);
					} else {
						throw new Error('获取支付数据失败');
					}
				} catch (error) {
					console.error('测试回调失败:', error);
				}
			},

			// 获取测试支付数据
			async getTestPaymentData() {
				try {
					// 生成动态签名
					const timestamp = parseInt(new Date().getTime() / 1000);
					let osName = uni.getSystemInfoSync().osName;
					const ios = osName == 'ios' ? 1 : 0;
					const sign = ios == 1 ? CryptoJS.SHA256(r.key + timestamp).toString() : md5(r.key + timestamp);

					const paymentData = {
						actualAmount: "",
						paymentProductId: "test_product_001", // 测试产品ID
						rechargePackId: this.rechargeId || "104",
						did: "test_did_" + Date.now(),
						backJumpPage: this.backJumpPage || "/pages/content/content",
						rechargeType: 1, // 1 是金币 2是订阅
						pid: this.pid || 2,
						version: this.version || "20250630",
						timestamp: timestamp,
						sign: sign,
						token: this.token,
						uid: this.uid,
						ios: ios,
						lang: this.lang,
					};

					// console.log('发送测试支付请求:', paymentData);

					// 调用H5支付接口
					const res = await this.$api.h5Pay(paymentData);
					if (res.code === 0 && res.data) {
						// console.log('获取到真实支付数据:', res.data);
						return res.data;
					} else {
						throw new Error(res.msg || '支付接口调用失败');
					}
				} catch (error) {
					console.error('获取测试支付数据失败:', error);
					return null;
				}
			},

			// 加载语言包
			async loadLanguage() {
				try {
					this.checkLang = this.lang || 'en-us';
					this.oldLang = uni.getStorageSync('basicLang') ? 'cached' : '';
					const timestamp = parseInt(new Date().getTime() / 1000);
					let osName = uni.getSystemInfoSync().osName;
					const ios = this.ios;
					const sign = ios == 1 ? CryptoJS.SHA256(r.key + timestamp).toString() : md5(r.key + timestamp);
					const params = {
						lang: this.checkLang || '',
						oldlang: this.oldLang || '',
						pid: this.pid || 9,
						cid: 109,
						version: this.version || "20250610",
						timestamp: timestamp,
						sign: sign,
						token: this.token || '',
						uid: this.uid || '',
						ios: ios || 2,
						ua: "uni-app-x/4.29",
						gmt: "GMT 08:00"
					};
					const res = await this.$api.getLanguage(params);

					if (res.code === 0 && res.data) {
						uni.removeStorageSync('basicLang');
						uni.setStorageSync('basicLang', res.data);
						this.langsize = res.data;
						if (res.data.language) {
							uni.setNavigationBarTitle({
								title: res.data.language
							});
						}
					}
				} catch (error) {
					console.error('加载语言包失败:', error);
				}
			}

		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}
	.card-content-overlay{
		height: 100%;
		position:relative;
		// background: pink;
		.discount_rate{
			position: absolute;
			top:190rpx;
			right: 56rpx;
			background:linear-gradient(to bottom,#FF0000,#C20000);
			padding:8rpx 16rpx;
			border-radius: 40rpx;
			font-size:20rpx;
			color: #FFFFFF;
		}
	}
	.container {
		max-width: 750rpx;
		background: #1F1F1F;
		min-height: 100vh;
		padding-top: 416rpx;
		overflow-x: hidden;
		width: 100%;
	}

	.top_bg {
		width: 750rpx;
		height: 416rpx;
		position: fixed;
	}

	/* 顶部导航栏 */
	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		min-width: 100vw;
		background-image: url('@/static/h5bgcolor2.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		// background-attachment: fixed;
		z-index: 10;
		transition: background-color 0.3s ease;
		height: 416rpx;
		overflow: hidden;
		// background: linear-gradient(to right,rgba(0, 0, 0, 0.6),#F15551);
	}

	.header-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 30rpx 10rpx;
		position: relative;
		z-index: 3;
		// background-color: palegoldenrod;;
	}

	.header-scrolled {
		background-image: none !important;
		background-color: #1F1F1F !important;
		height: auto;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
		z-index: 9999;
	}

	// .header-scrolled .header-top {
	// 	padding: 30rpx 30rpx 20rpx !important;
	// }

	.header-scrolled .subscription-section {
		display: none !important;
		height: 0 !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}

	.header-left .close-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		user-select: none;
		background-color: pink;
	}

	.coins-info-overlay {
		position: relative;
		top: 70rpx;
		left: 300rpx;
		display: flex;
		align-items: center;
	}

	.coins-text-overlay {
		font-weight: 600;
		font-size: 48rpx;
		color: #FFFFFF;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-right: 19rpx;
	}

	.close-img {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.subscription-carousel-container {
		position: relative;
		bottom: 100rpx;
		left: 0;
		z-index: 10;
	}

	.header-center .title {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-left: 60rpx;
	}


	.coin-container {
		display: flex;
		align-items: center;
		gap: 10rpx;
		background: rgba(255, 255, 255, 0.1);
		padding: 12rpx 20rpx;
		border-radius: 25rpx;
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
	}

	.coin-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.coin-amount {
		color: white;
		font-size: 28rpx;
		font-weight: bold;
	}

	/* 订阅优惠部分 */
	.subscription-section {
		position: absolute;
		// bottom: 0;
		left: 0;
		right: 0;
		padding: 40rpx 30rpx 60rpx;
		text-align: center;
		z-index: 2;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_bg {}

	.subscription-section02 {
		position: relative;
		bottom: 180rpx;
		left: 0;
		right: 0;
		padding: 0rpx 60rpx;
		text-align: center;
		z-index: 2;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.subscription-section03 {
		position: relative;
		bottom: 220rpx;
		left: 0;
		right: 0;
		padding: 0rpx 60rpx;
		text-align: center;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.section-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 20rpx;
		background-image: url('/static/bg_color01.svg');
		background-size: 80% 100%;
		background-repeat: no-repeat;
		background-position: center;
		z-index: -1;
	}

	.section-bg02 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0rpx;
		background-image: url('/static/bgcolor02.svg');
		background-size: 70% 100%;
		border-radius: 100%;
		background-repeat: no-repeat;
		background-position: center;
		z-index: -1;
	}

	.section-bg03 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0rpx;
		background-image: url('/static/bgcolor03.svg');
		background-size: 70% 100%;
		margin: 10rpx;
		border-radius: 100%;
		background-repeat: no-repeat;
		background-position: center;
		z-index: -1;
	}

	.section-title {
		display: flex;

		align-items: center;
		justify-content: center;
	}

	.title-text {
		font-weight: 600;
		font-size: 38rpx;
		color: #FFFFFF;
		text-align: center;
		text-transform: uppercase;
	}

	.title-text03 {
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 32rpx;
		text-align: center;
	}

	/* 订阅优惠轮播 */
	.subscription-carousel {
		white-space: nowrap;
		margin-bottom: 30rpx;
	}

	.subscription-card {
		display: inline-block;
		width: 600rpx;
		height: 400rpx;
		margin-right: 20rpx;
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.card-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #ff8a00 0%, #ffd700 100%);
		opacity: 0.9;
	}



	.card-title {
		color: #8b4513;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 1rpx;
		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}

	.card-illustration {
		text-align: center;
		margin: 20rpx 0;
	}



	.coin-details {
		text-align: center;
	}

	.total-coins {
		color: white;
		font-size: 24rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 15rpx;
	}

	.coin-breakdown {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}

	.coin-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5rpx;
	}

	.coin-number {
		color: white;
		font-size: 28rpx;
		font-weight: bold;
	}

	.coin-icon-small {
		width: 24rpx;
		height: 24rpx;
	}

	.coin-label {
		color: #ff6b35;
		font-size: 18rpx;
		background: rgba(255, 255, 255, 0.9);
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		font-weight: bold;
	}

	.price-btn {
		background: linear-gradient(135deg, #4a4a4a 0%, #6a6a6a 100%);
		border-radius: 25rpx;
		padding: 15rpx 30rpx;
		text-align: center;
		align-self: center;
	}

	.price-text {
		color: white;
		font-size: 24rpx;
		font-weight: bold;
	}

	/* 订阅说明和链接 */
	.subscription-info {
		text-align: center;
	}

	.info-text {
		color: #999;
		font-size: 24rpx;
		display: block;
		margin-bottom: 20rpx;
	}

	.info-links {
		display: flex;
		justify-content: center;
		gap: 20rpx;
		margin-bottom: 15rpx;
	}

	.link {
		color: #999;
		font-size: 22rpx;
		text-decoration: underline;
	}

	/* 特殊优惠部分 */
	.special-offers-section {
		padding: 0 30rpx;
	}

	.special-disclaimer {
		color: #999;
		font-size: 22rpx;
		text-align: center;
		display: block;
		margin-bottom: 30rpx;
	}

	.card-illustration {
		grid-column: 1;
		grid-row: 1 / 4;
		display: flex;
		align-items: center;
		justify-content: center;
	}



	.coin-amount-large {
		grid-column: 2;
		grid-row: 1;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.amount-text {
		color: white;
		font-size: 32rpx;
		font-weight: bold;
	}

	.current-price-overlay {
		width: 196rpx;
		height: 64rpx;
		position: relative;
		top: 80rpx;
		left: 350rpx;
		background-image: url('/static/jiaolan.svg');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.price-text-overlay {
		text-align: center;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 1;
		margin: 0;
		padding: 0;
	}

	.coin-icon-large {
		width: 32rpx;
		height: 32rpx;
	}

	.price-section {
		grid-column: 2;
		text-align: center;
		align-self: flex-start;
	}

	.original-price {
		text-align: center;
		align-self: flex-start;
	}

	.original-text {
		color: #999;
		font-size: 20rpx;
		text-decoration: line-through;
	}

	.discount-badge {
		background: #ff1744;
		border-radius: 15rpx;
		padding: 6rpx 12rpx;
		align-self: flex-start;
	}

	.discount-text {
		color: white;
		font-size: 18rpx;
		font-weight: bold;
	}

	.card-label {
		padding: 8rpx 16rpx;
		text-align: center;
		align-self: flex-start;
	}

	.label-text {
		color: white;
		font-size: 18rpx;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 1rpx;
	}

	/* 订阅底部信息 */
	.subscription-footer {
		position: relative;
		left: 0;
		bottom: 150rpx;
		padding: 40rpx 30rpx;
		background: #1F1F1F;
	}

	.footer-content {
		text-align: center;
	}

	.pricing-info {
		display: block;
		color: #999;
		font-size: 24rpx;
		line-height: 1.5;
	}

	.footer-links {
		display: flex;
		justify-content: center;
		gap: 40rpx;
	}

	.footer-link {
		color: #999;
		font-size: 24rpx;
		text-decoration: underline;
		cursor: pointer;
		transition: color 0.3s ease;
	}

	.footer-link:hover {
		color: #FFFFFF;
	}

	.restore-link {
		display: block;
		text-decoration: none;
	}

	/* 特殊优惠卡片样式 */
	.special-offers-container {
		position: relative;
		bottom: 200rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: 0rpx;
		z-index: 5;
	}


	.special-card {
		height: 200rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		transition: all 0.3s ease;
		cursor: pointer;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
	}

	.special-card:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
	}

	.special-card-bg01 {
		width: 670rpx;
		height: 346rpx;
		text-align: center;
		background-image: url('/static/image01.png');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.special-card-bg02 {
		width: 670rpx;
		height: 346rpx;
		text-align: center;
		background-image: url('/static/image02.png');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.special-card-bg03 {
		position: relative;
		width: 670rpx;
		height: 346rpx;
		text-align: center;
		/* background-image: url('/static/image03.png'); */
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;

	}

	.rec_bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}

	.special-card-red .special-card-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: url('/static/image01.png');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}


	.coin-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.price-section {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 8rpx;
	}

	.current-price-btn {
		background: rgba(0, 0, 0, 0.8);
		border-radius: 25rpx;
		padding: 12rpx 24rpx;
	}

	.current-price-text {
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: bold;
	}

	.original-discount {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.original-price-text {
		color: rgba(255, 255, 255, 0.9);
		font-size: 22rpx;
		text-decoration: line-through;
	}

	.discount-tag {
		background: #E53935;
		border-radius: 12rpx;
		padding: 6rpx 10rpx;
	}

	.discount-percentage {
		color: #FFFFFF;
		font-size: 18rpx;
		font-weight: bold;
	}

	.external-label {
		position: absolute;
		bottom: -20rpx;
		left: 0;
		background: rgba(0, 0, 0, 0.9);
		border: 3rpx solid #FFD700;
		border-radius: 20rpx;
		padding: 12rpx 24rpx;
		z-index: 10;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
	}

	.external-label-text {
		color: #FFFFFF;
		font-size: 18rpx;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 1rpx;
	}

	.coin-icon-overlay {
		width: 58rpx;
		height: 64rpx;
	}

	.price-info-overlay {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.original-discount-overlay {
		position: relative;
		left: 110rpx;
		bottom: -50rpx;
		margin-top: 20rpx;
	}

	.discount-text-overlay {
		font-weight: 600;
		font-size: 21rpx;
		color: #FFFFFF;
	}

	.external-label-overlay {
		position: absolute;
		bottom: 16rpx;
		left: 76rpx;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.discount-badge-overlay {
		width: 86rpx;
		height: 40rpx;
		position: relative;
		top: 38rpx;
		left: 538rpx;
		right: 0;
		bottom: 20rpx;
		background-image: url('/static/bgred.svg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.discount-text-overlay {
		font-weight: 600;
		font-size: 21rpx;
		color: #FFFFFF;
	}

	.external-label-overlay {
		position: absolute;
		bottom: 16rpx;
		left: 76rpx;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.external-label-text-overlay {
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	/* 卡片点击效果优化 */
	.special-card-bg01:active,
	.special-card-bg02:active,
	.special-card-bg03:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
		transition: all 0.2s ease;
	}

	.special-card-wrapper {
		position: relative;
		margin-bottom: 10rpx;
	}

	.original-price-overlay {
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
		position: relative;
		text-decoration: none;
	}

	.original-price-overlay::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom left, transparent 45%, #3A3A3A 47%, #3A3A3A 53%, transparent 50%);
		pointer-events: none;
	}

	.refill-coins-container {
		position: relative;
		bottom: 180rpx;
		padding: 0 30rpx;
		z-index: 5;
	}

	.refill-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		justify-content: space-between;
	}

	.refill-grid>.refill-card {
		flex: 0 0 calc(33.333% - 14rpx);
		max-width: calc(33.333% - 14rpx);
	}

	/* 当只有1个卡片时，靠左显示 */
	.refill-grid.grid-single-item {
		justify-content: flex-start;
	}

	.refill-grid.grid-single-item .refill-card {
		flex: 0 0 calc(33.333% - 14rpx);
		max-width: calc(33.333% - 14rpx);
	}

	/* 当只有2个卡片时，靠边显示 */
	.refill-grid.grid-two-items {
		justify-content: space-between;
	}

	.refill-grid.grid-two-items .refill-card {
		flex: 0 0 calc(33.333% - 14rpx);
		max-width: calc(33.333% - 14rpx);
	}

	/* 第7-8条数据：居中显示，中间有间隔 */
	.refill-grid>.refill-card:nth-child(7) {
		flex: 0 0 calc(33.333% - 14rpx);
		max-width: calc(33.333% - 14rpx);
	}

	.refill-grid>.refill-card:nth-child(8) {
		flex: 0 0 calc(33.333% - 14rpx);
		max-width: calc(33.333% - 14rpx);
	}

	.refill-grid>.gift-box-card {
		flex: 0 0 100%;
		max-width: 100%;
		margin: 20rpx 0;
	}

	.refill-card {
		flex: 1;
		border-radius: 20rpx;
		padding: 0rpx 0rpx 20rpx 0rpx;
		position: relative;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		min-height: 307rpx;
		height: 307rpx;
	}

	.refill-card:active {
		transform: scale(0.95);
	}

	.refill-card-small {
		background-image: url('/static/refill.png');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		overflow: hidden;
	}

	.refill-card-small::before {
		content: '';
		position: absolute;
		bottom: -20%;
		left: -20%;
		width: 20%;
		height: 100%;
		background: linear-gradient(45deg,
				transparent,
				rgba(255, 255, 255, 0.1) 30%,
				rgba(255, 255, 255, 0.2) 50%,
				rgba(255, 255, 255, 0.1) 70%,
				transparent);
		animation: diagonalLightSweep 5s ease-in-out infinite;
		z-index: 1;
		pointer-events: none;
		transform-origin: bottom left;
	}

	.refill-card-medium {
		background-image: url('/static/refill.png');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.refill-card-popular {
		background-image: url('/static/refillred.png');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
	}

	.popular-label {
		position: absolute;
		top: -10rpx;
		left: 50%;
		transform: translateX(-50%);
		background: #FFFFFF;
		color: #DC2626;
		font-size: 20rpx;
		font-weight: bold;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		text-transform: uppercase;
		letter-spacing: 1rpx;
	}

	.most-popular-label {
		margin: 20rpx 0rpx;
		position: absolute;
		top: 126rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 192rpx;
		height: 28rpx;
		background: linear-gradient(180deg, #4212D2 0%, #2F0D96 100%);
		border-radius: 20rpx;
		color: #FFFFFF;
		font-size: 16rpx;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 1rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 3;
	}

	.discount-badge-refill {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		background-image: url('/static/bgborder.svg');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		color: #FFFFFF;
		font-size: 18rpx;
		font-weight: bold;
		padding: 6rpx 6rpx;
		text-transform: uppercase;
	}

	.discount-red {
		position: absolute;
		top: 6rpx;
		right: 0rpx;
		background-image: url('/static/bgredborder.svg');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		color: #FFFFFF;
		font-size: 18rpx;
		font-weight: bold;
		padding: 6rpx 6rpx;
	}

	.coin-display {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		justify-content: center;
	}


	.coin-stack {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.coin-stack-large {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.coin-behind {
		position: absolute;
		left: -15rpx;
		top: -8rpx;
		opacity: 0.8;
	}

	.coin-behind-2 {
		position: absolute;
		left: -30rpx;
		top: -16rpx;
		opacity: 0.6;
	}

	.coin-behind-3 {
		position: absolute;
		left: -45rpx;
		top: -24rpx;
		opacity: 0.4;
	}

	.coin-behind-4 {
		position: absolute;
		left: -60rpx;
		top: -32rpx;
		opacity: 0.2;
	}

	.coin-amount-refill {
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
	}

	.original-amount-refill {
		font-size: 24rpx;
		color: #44158F;
		position: relative;
		text-decoration: none;
		text-align: center;
		margin-top: 6rpx;
		margin-bottom:6rpx;
	}

	.original-amount-refill::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom right, transparent 45%, #44158F 47%, #44158F 53%, transparent 50%);
		pointer-events: none;
	}

	.original-amount-red {
		font-size: 24rpx;
		color: #FF87B2;
		position: relative;
		text-decoration: none;
		text-align: center;
		margin-top: -10rpx;
	}

	.original-amount-red ::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom right, transparent 45%, #FF87B2 47%, #FF87B2 53%, transparent 50%);
		pointer-events: none;
	}

	.coin-icon-refill {
		width: 184rpx;
		height: 120rpx;
	}

	.price-refill {
		background-image: url('/static/bgbottom.svg');
		/* background-size: 100% 100%; */
		background-position: center;
		background-repeat: no-repeat;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 60rpx;
		width: 100%;
		position: absolute;
		bottom: 0rpx;
		left: 0;
		right: 0;
		overflow: hidden;
	}

	.price-refillred {
		background-image: url('/static/bgbtnred.svg');
		/* background-size: 100% 100%; */
		background-position: center;
		background-repeat: no-repeat;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 60rpx;
		width: 100%;
		position: absolute;
		bottom: 0rpx;
		left: 0;
		right: 0;
		overflow: hidden;
	}

	/* 硬币背景图片覆盖层 */
	.coin-bg-overlay {
		position: absolute;
		top: 100rpx;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
		pointer-events: none;
	}

	.coin-bg-image {
		width: 160rpx;
		height: 120rpx;
		opacity: 0.9;
	}

	/* 特殊礼盒卡片样式 */
	.gift-box-section {
		position: relative;
		bottom: 160rpx;
		padding: 0 30rpx;
		z-index: 5;
	}

	.gift-box-card {
		height: 200rpx;
		width: 100%;
		background-image: url('/static/bglihe.svg');
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 20rpx;
		position: relative;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		padding: 30rpx;
		overflow: hidden;
	}

	.gift-box-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: -20%;
		width: 20%;
		height: 100%;
		background: linear-gradient(90deg,
				transparent,
				rgba(255, 255, 255, 0.1) 30%,
				rgba(255, 255, 255, 0.2) 50%,
				rgba(255, 255, 255, 0.1) 70%,
				transparent);
		animation: lightSweep 5s ease-in-out infinite;
		z-index: 1;
		pointer-events: none;
	}

	@keyframes lightSweep {
		0% {
			left: -20%;
		}

		50% {
			left: 100%;
		}

		100% {
			left: 100%;
		}
	}

	.gift-box-card:active {
		transform: scale(0.98);
	}

	.gift-discount-badge {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		background-image: url('/static/bgborder.svg');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		color: #FFFFFF;
		font-size: 18rpx;
		font-weight: bold;
		padding: 8rpx 16rpx;
		text-transform: uppercase;
	}

	.gift-card-content {
		display: flex;
		align-items: center;
		flex: 1;
		gap: 30rpx;
		margin-left: 40rpx;
	}

	.gift-box-image {
		flex-shrink: 0;
	}

	.gift-box-icon {
		width: 167rpx;
		height: 179rpx;
	}

	.gift-coin-info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.gift-coin-amount-container {
		position: relative;
		top: 20rpx;
		left: 0rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.gift-coin-amount {
		color: #FFFFFF;
		font-size: 50rpx;
		font-weight: bold;
		line-height: 1;
		// margin-bottom: 8rpx;
		position: relative;
		z-index: 2;
	}

	.gift-coin-bg {
		position: absolute;
		top: 50%;
		left: 64%;
		width: 299rpx;
		height: 225rpx;
		transform: translate(-50%, -50%);
		background-image: url('/static/giftbgcolor.svg');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.gift-coin-subtitle {
		color: #44158F;
		/* color: rgba(255, 255, 255, 0.8); */
		font-size: 28rpx;
		font-weight: 500;
	}

	.gift-best-value-label {
		background: linear-gradient(180deg, #EC467A 0%, #CC2A4C 100%);
		color: #FFFFFF;
		font-size: 16rpx;
		font-weight: bold;
		padding: 8rpx 60rpx;
		border-radius: 20rpx;
		text-transform: uppercase;
		letter-spacing: 1rpx;
	}

	.gift-price-section {
		position: absolute;
		bottom: 0rpx;
		left: 0;
		right: 0;
		background-image: url('/static/giftbtn.svg');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 60rpx;
	}

	/* 订阅者专享区域样式 */
	.subscribers-only-section {
		position: relative;
		bottom: 200rpx;
		padding: 0 30rpx;
	}

	.premium-cards-container {
		// background-image: url('/static/bgcolor05.svg');
		// background-size: 100% 100%;
		// background-position: center;
		// background-repeat: no-repeat;
		position: relative;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		gap: 15rpx;
		flex-wrap: wrap;

		// background-color: pink;
		.p-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%
		}
	}

	.premium-card {
		flex: 1;
		// background-image: url('/static/bgyellow.svg');
		// background-size: 100% 100%;
		// background-position: center;
		// background-repeat: no-repeat;
		border-radius: 15rpx;
		padding: 10rpx 15rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 200rpx;
		position: relative;

		.p_coin_bg {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100%
		}
	}

	.premium-discount-badge {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		background-image: url('/static/bgborder.svg');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		color: #FFFFFF;
		font-size: 14rpx;
		font-weight: bold;
		padding: 4rpx 8rpx;
		text-transform: uppercase;
	}

	.premium-coin-display {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		justify-content: center;
		margin-top: 20rpx;
		.origin_coin{
			position: relative;
			color:#D0751A;
			font-size: 24rpx;
		}
	}

	.premium-coin-icon {
		width: 150rpx;
		height: 100rpx;
		// margin-bottom: 10rpx;
	}

	.premium-coin-amount {
		position: relative;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 4rpx;
	}

	.premium-original-amount {
		font-weight: 600;
		font-size: 24rpx;
		color: #D0751A;
	}

	.premium-price-section {
		background-image: url('/static/giftbtn.svg');
		background-position: center;
		background-repeat: no-repeat;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: bold;
		text-align: center;
		padding: 12rpx 14rpx;
		border-radius: 20rpx;
		width: 100%;
		position: relative;
	}

	/* 锁定区域样式 */
	.locked-section {
		position: relative;
		bottom: 180rpx;
		padding-bottom: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.locked-bg {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.locked-bg-image {
		width: 86rpx;
		height: 48rpx;
	}

	.lock-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.lock-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.lock-bg-image {
		width: 160rpx;
		height: 120rpx;
		opacity: 0.4;
	}

	/* 测试回调按钮样式 */
	.test-callback-section {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 30rpx;
		margin-top: 40rpx;
	}

	.test-callback-button {
		background: #007AFF;
		border-radius: 25rpx;
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.test-callback-button:hover {
		background: #0056CC;
	}

	.test-callback-text {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}

	/* 协议弹窗样式 */
	.protocol-popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.protocol-popup-container {
		background-color: #000000;
		width: 100%;
		height: 90vh;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		flex-direction: column;
		animation: slideUp 0.3s ease-out;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.protocol-popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #333333;
	}

	.protocol-popup-title {
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: bold;
	}

	.protocol-close-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #333333;
		border-radius: 50%;
		cursor: pointer;
	}

	.protocol-close-btn:hover {
		background-color: #555555;
	}

	.protocol-close-text {
		color: #FFFFFF;
		font-size: 40rpx;
		font-weight: bold;
		line-height: 1;
	}

	.protocol-popup-content {
		flex: 1;
		padding: 40rpx;
		// max-height: 80vh;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.protocol-rich-text {
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 1.6;
		word-wrap: break-word;
		word-break: break-all;
		white-space: pre-wrap;
		text-align: left;
		width: 100%;
		box-sizing: border-box;
	}

	/* 协议内容中的HTML标签样式 */
	.protocol-rich-text>>>p {
		color: #FFFFFF !important;
		margin-bottom: 20rpx;
		line-height: 1.6;
		word-wrap: break-word;
		word-break: break-all;
		text-align: left;
		width: 100%;
		box-sizing: border-box;
	}

	.protocol-rich-text>>>strong {
		color: #FFFFFF !important;
		font-weight: bold;
		word-wrap: break-word;
		word-break: break-all;
	}

	.protocol-rich-text>>>h1,
	.protocol-rich-text>>>h2,
	.protocol-rich-text>>>h3,
	.protocol-rich-text>>>h4,
	.protocol-rich-text>>>h5,
	.protocol-rich-text>>>h6 {
		color: #FFFFFF !important;
		font-weight: bold;
		margin-bottom: 20rpx;
		word-wrap: break-word;
		word-break: break-all;
		text-align: left;
		width: 100%;
		box-sizing: border-box;
	}

	.protocol-rich-text>>>ul,
	.protocol-rich-text>>>ol {
		color: #FFFFFF !important;
		padding-left: 40rpx;
		margin-bottom: 20rpx;
		word-wrap: break-word;
		word-break: break-all;
		text-align: left;
		width: 100%;
		box-sizing: border-box;
	}

	.protocol-rich-text>>>li {
		color: #FFFFFF !important;
		margin-bottom: 10rpx;
		word-wrap: break-word;
		word-break: break-all;
		text-align: left;
		width: 100%;
		box-sizing: border-box;
	}
</style>